<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位小技巧2</title>
    <style>
        .mask{
            background-color: rgba(0, 0, 0, 0.3); /*带透明度的颜色*/
            /*使用固定定位,紧贴参照物html的4个边,就可以与整个页面窗口一样大*/
            position: fixed;
            top:0;
            bottom:0;
            left:0;
            right: 0;
        }
        .mask:hover {
            /*让元素在文档流中消失*/
            display: none;
        }
    </style>
</head>
<body>
<!-- 遮罩层 -->
<div class="mask"></div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut consectetur distinctio dolorem doloremque, et eum
    harum illo, in iusto laudantium libero magni neque numquam quas quasi quidem quisquam quo repudiandae.
</div>
<div>Aut cupiditate deserunt ducimus eius excepturi illo omnis vero? Alias dolores iusto, labore nostrum odit unde!
    Asperiores delectus facilis illo incidunt magnam modi molestiae nihil nulla obcaecati, sed, vitae voluptate.
</div>
<div>Ad, commodi distinctio? Consequuntur expedita facere facilis ipsum praesentium repellat veniam! Ad consequatur
    dolore id, nesciunt perspiciatis sequi soluta ullam veniam! Assumenda incidunt ipsa iusto odit placeat quos
    recusandae vitae?
</div>
<div>Accusantium culpa, reprehenderit? At atque autem deleniti dolorum, fuga sit sunt vero. Autem cum, dolor facere
    facilis incidunt ipsum minus, numquam odio pariatur porro possimus quos repudiandae sit veritatis voluptatibus.
</div>
<div>Ab consequuntur excepturi fuga hic id incidunt libero obcaecati porro, veritatis. Ad adipisci, aliquid consequatur
    dolores eius impedit minima mollitia numquam omnis rem repudiandae vitae. Accusamus cupiditate laboriosam
    perspiciatis quos?
</div>
<div>Ab, aliquam corporis cum cumque debitis eius esse eum ex ipsum itaque iusto neque praesentium vel voluptate
    voluptatem. Ab cumque eaque incidunt ipsa iure maxime modi obcaecati quibusdam quo ut.
</div>
<div>Ab beatae commodi consequuntur cumque distinctio dolores earum eligendi excepturi hic libero maxime nostrum
    obcaecati possimus quaerat quidem, quisquam quo repellendus suscipit tenetur velit? Accusantium esse ex nihil. Esse,
    numquam.
</div>
<div>Accusamus, adipisci animi beatae blanditiis corporis debitis delectus dignissimos dolor eligendi esse facere ipsam
    iusto laboriosam modi neque nihil odio possimus qui quidem quod reiciendis sequi suscipit totam ut, vero.
</div>
<div>Accusantium architecto asperiores, assumenda, beatae blanditiis consequuntur doloremque dolorum, eos esse fugiat
    laborum minima nisi nostrum obcaecati pariatur quibusdam quo quos recusandae repudiandae sapiente sunt tenetur totam
    unde veritatis voluptatum!
</div>
<div>Amet consectetur deleniti eligendi ipsam nobis quia quo repellendus repudiandae. Facilis, tempore tenetur. Autem
    dolorem libero magni maxime voluptate? Autem culpa fugiat incidunt maiores minus, neque nulla repellat rerum sit.
</div>
<div>Adipisci alias aperiam, corporis cum distinctio dolor doloribus ducimus fugiat ipsa ipsam magnam minima neque
    nesciunt nihil nulla optio quae recusandae rem, sequi tempora. Eligendi illo numquam rem suscipit vel.
</div>
<div>Autem dicta nobis ut vitae voluptatibus? Aspernatur maiores officiis repellat sapiente vero. Architecto earum, est
    explicabo fugiat iure magni nisi porro rem vel voluptas. Aperiam cum facere iste itaque odio!
</div>
<div>Aliquid, animi at aut beatae debitis dicta distinctio, dolores est fugit laboriosam neque nobis qui quis ratione
    repellendus repudiandae tempora ut veritatis. Dolor dolorum impedit in iusto nesciunt ut vel.
</div>
<div>Adipisci amet at beatae blanditiis commodi cum cumque cupiditate dolore ducimus eos eum exercitationem incidunt
    ipsam itaque laborum maxime minima mollitia nobis perspiciatis quis quisquam quos repudiandae sunt ullam, velit!
</div>
<div>Cum cumque est ex impedit ipsam iste laboriosam maiores molestias odit placeat porro provident quaerat quod ratione
    reprehenderit, sint ullam! A harum inventore laudantium nobis odit quasi repellendus vero voluptas.
</div>
<div>Animi asperiores aspernatur autem consequatur earum eos et exercitationem explicabo, facere, hic in ipsum labore
    laboriosam minus modi nesciunt omnis possimus provident qui saepe sint sunt tempora tenetur ullam vel!
</div>
<div>Magnam, reprehenderit unde. A adipisci alias architecto asperiores aut consequatur ea esse eveniet fugiat id ipsam,
    iure magnam numquam qui repudiandae sapiente sequi suscipit velit veritatis voluptates? Illo, in optio?
</div>
<div>Ad alias asperiores delectus dolor doloremque eligendi error exercitationem facere harum illo ipsa ipsam minima
    necessitatibus nemo neque odio possimus quaerat quam, quod ratione rerum sunt temporibus voluptas voluptate
    voluptates?
</div>
<div>A beatae culpa dolore, ea error harum hic in minima nemo, nesciunt perspiciatis quaerat quis quo quod tenetur.
    Beatae doloremque itaque laboriosam, magnam natus neque odit quod sit veniam voluptates.
</div>
<div>A aliquam aliquid aspernatur autem beatae consequuntur deserunt dicta eius enim exercitationem facilis, fugit harum
    illo iure nam officia provident quam quidem reiciendis rerum sint tenetur veritatis voluptas! Culpa, saepe?
</div>
<div>Animi, fugit inventore minima quasi sint tenetur voluptatem! Accusamus commodi ex nihil voluptatum. Animi
    blanditiis ea fugit officiis perferendis quidem quis quos ratione tempora ullam! Aspernatur dicta fuga molestias
    mollitia.
</div>
<div>Aspernatur commodi consequatur cupiditate dignissimos distinctio et eveniet, fugiat, harum hic molestias
    necessitatibus odit quam saepe sapiente totam ut vel? Eos, ut, vero. Deleniti eos inventore minima omnis veniam.
    Ipsum?
</div>
<div>Accusamus eaque est laudantium quam quisquam. A ad amet consequatur delectus dolore doloribus, eos est eveniet
    inventore iste itaque magnam nemo nulla perspiciatis praesentium provident quam unde, ut vitae voluptatum!
</div>
<div>A assumenda explicabo minima, natus sed temporibus veritatis. A amet animi architecto delectus deserunt esse et
    hic, iusto, minus numquam optio praesentium quo tenetur? Cum ducimus laborum modi nesciunt porro!
</div>
<div>Aliquid at deserunt, doloribus iure libero nam provident quam. Commodi consequatur sit totam. Accusantium in
    laudantium magni minima nostrum placeat, praesentium quae sapiente tenetur veniam! Delectus earum facilis maxime
    unde?
</div>
<div>Animi beatae distinctio, esse expedita modi omnis quaerat rem totam unde voluptas! Ad animi cum debitis doloribus
    harum labore magni, omnis perferendis quae quaerat quo reiciendis reprehenderit similique sint voluptatibus!
</div>
<div>Alias molestias odit rem reprehenderit sit! Alias aspernatur enim eum, id inventore magnam officiis voluptatem
    voluptates. Ab, expedita ipsam modi odio perferendis placeat, porro similique sint tempore ullam veritatis
    voluptatibus!
</div>
<div>Atque cum delectus est id modi non optio possimus provident saepe voluptatum! Animi architecto at beatae culpa,
    dolorum ea eligendi et inventore, magni, molestias odit placeat quam quod quos voluptatum?
</div>
<div>Commodi consequatur delectus non quisquam, sint velit. Commodi consectetur eius exercitationem necessitatibus nihil
    quos rerum sunt. Animi aut beatae, distinctio dolorem id, molestiae necessitatibus, quia reprehenderit saepe sed
    veniam voluptas.
</div>
<div>Debitis libero mollitia nesciunt nisi. Adipisci autem consectetur deserunt ea eum ex facere fugiat incidunt
    inventore minus nihil obcaecati quae quasi quidem quis, recusandae reprehenderit rerum sapiente tempora vitae
    voluptate!
</div>
<div>Amet blanditiis iure minima placeat voluptate voluptatum! Consectetur magni numquam possimus sapiente sed! Alias
    dolore eos exercitationem laboriosam libero molestiae molestias quia, quibusdam quidem quod, ratione, tempore
    veritatis vitae voluptatem?
</div>
<div>Architecto autem exercitationem harum illum incidunt, odio officia quia quidem reiciendis repudiandae tenetur vel
    vero, vitae. Aliquid cum, odit. Ab architecto blanditiis eius fugit inventore mollitia neque nihil odio voluptates.
</div>
<div>Architecto aspernatur assumenda beatae consectetur doloremque in laudantium neque repellendus sapiente voluptate.
    Ab error necessitatibus quisquam quo sit? Atque dolor dolore iste iure mollitia necessitatibus quas quod, tempora
    veniam voluptates?
</div>
<div>A accusamus alias blanditiis consequuntur cum debitis dolores dolorum earum eligendi error esse facere fuga
    incidunt ipsam libero nam nobis, odit officia porro quibusdam quod reiciendis sapiente ullam vero voluptatibus!
</div>
<div>Animi dolore dolores, ex facere laboriosam neque nulla obcaecati quae repellat repellendus! Amet asperiores at aut
    et fuga iusto maiores modi nostrum odit omnis quaerat, qui quod sapiente ut voluptate!
</div>
<div>Blanditiis commodi consequatur dignissimos, distinctio ducimus error explicabo, illo magni nostrum nulla officiis
    pariatur porro quidem rem tempora tenetur totam velit. Blanditiis consectetur doloremque hic, minima nam nobis
    obcaecati ut?
</div>
<div>Facere, molestiae nam officia pariatur provident ratione sed? At, dignissimos et facere fuga fugit ipsa molestiae
    natus nobis, nostrum nulla officia optio quod sed tempora temporibus unde velit veniam vero?
</div>
<div>Atque ea et eum hic id mollitia necessitatibus obcaecati, quaerat quam qui quidem quod recusandae sint tenetur
    ullam ut veritatis voluptates. Consectetur, minima, quis? Consequuntur maiores nihil officia perferendis qui!
</div>
<div>A adipisci amet blanditiis cum dicta dignissimos dolorem eos expedita explicabo facilis hic id illo, incidunt
    labore magni modi neque pariatur perferendis quis quo repellendus soluta sunt totam ut vero.
</div>
<div>Adipisci amet animi at cupiditate deserunt dolor, earum enim eos exercitationem expedita, explicabo fugiat hic
    impedit ipsa labore magni maiores modi natus numquam obcaecati odio quaerat quasi soluta ut vel.
</div>
<div>Ad architecto cupiditate dolore dolorem doloribus ea est fuga, illum iure labore magni maiores necessitatibus quae
    ratione repellendus sit voluptatum! Accusantium aspernatur consectetur fuga ipsum nemo quae repellat, rerum
    similique?
</div>
<div>Amet explicabo optio sed! Accusantium alias at autem distinctio dolor, dolore doloribus, earum eum fugit illum in
    minima mollitia nemo nesciunt officia pariatur, possimus quo repellat sequi vitae voluptate voluptatem?
</div>
<div>Aut blanditiis cumque cupiditate debitis deserunt doloribus dolorum eius eos error eveniet expedita iste, iure
    laudantium magni maxime, nihil nisi nobis obcaecati quisquam rem repellat saepe unde vel veritatis vitae.
</div>
<div>Ab beatae eos eveniet facilis nam reiciendis sed temporibus voluptatem? Aspernatur, blanditiis consequuntur earum
    enim error expedita, fugit iste neque nobis omnis porro quod sequi. Ad beatae dolores ipsum minima!
</div>
<div>Dicta inventore itaque natus placeat quasi quos reiciendis tempore. Aspernatur, consectetur cumque deleniti
    distinctio dolorum ducimus expedita facilis id incidunt molestiae pariatur, quidem quisquam repellendus rerum
    suscipit tempora temporibus ullam!
</div>
<div>Beatae blanditiis dicta doloribus enim facilis odio quisquam recusandae saepe veniam voluptatum! Ab, accusamus amet
    distinctio eveniet harum hic iure nulla numquam porro quae quod recusandae rerum sequi totam voluptatum!
</div>
<div>Adipisci alias animi commodi consequuntur dolor doloremque doloribus ea enim esse eveniet, exercitationem facere
    facilis ipsa ipsum labore mollitia necessitatibus obcaecati odit optio placeat porro reiciendis saepe sequi soluta
    sunt.
</div>
<div>Ad amet dolor harum necessitatibus optio porro quidem repudiandae ullam. Accusamus ad aspernatur deleniti illo
    ipsam necessitatibus odio, officia quod rerum totam. Adipisci aut ducimus illum iure maxime quis saepe.
</div>
<div>A alias aperiam error inventore nemo quam repellendus totam vero. A ab commodi consectetur consequuntur cumque
    excepturi exercitationem hic nam natus nostrum quae reiciendis rerum soluta, sunt vel. Doloremque, minus!
</div>
<div>Ab aliquid assumenda aut autem corporis deleniti distinctio dolor dolore doloribus dolorum ducimus error eum
    explicabo, incidunt iste, itaque, iure iusto molestiae quod reprehenderit sed sit suscipit velit veritatis
    voluptatum!
</div>
<div>Cum delectus ipsam nulla quaerat similique. Amet, at debitis distinctio minima nemo perspiciatis repudiandae
    sapiente! A cumque, debitis deserunt est eveniet itaque, magni quisquam rem sit sunt temporibus unde ut.
</div>
<div>Culpa id minima reprehenderit sed similique vitae. Accusantium beatae dicta dolorum ipsum mollitia rem ullam
    voluptas! Dolor enim eveniet laborum magni nesciunt pariatur sit veniam. Expedita facilis labore laborum sapiente.
</div>
<div>Adipisci animi architecto aut dignissimos dolor, doloremque explicabo fugiat harum illum ipsum itaque labore
    laborum laudantium minima mollitia neque nulla numquam qui, quo recusandae repudiandae, tempora tempore! Assumenda,
    deleniti, sequi.
</div>
<div>Blanditiis delectus doloribus ea expedita pariatur, saepe tempore vel! Cupiditate delectus eligendi est facilis
    incidunt iure, nesciunt non pariatur provident tenetur. Ab doloremque enim, exercitationem laudantium molestiae qui
    saepe voluptatum!
</div>
<div>Accusamus adipisci aspernatur aut in quae saepe, tempore totam voluptates! Consequuntur dolore iste necessitatibus
    nostrum nulla optio pariatur quidem quos suscipit ullam? Dolorum et neque nobis nulla officia sapiente voluptatibus!
</div>
<div>Beatae commodi cupiditate distinctio, dolor doloribus eaque, eius eligendi et ex explicabo facere hic inventore
    iure maiores maxime neque nostrum nulla omnis pariatur possimus quod saepe sapiente similique vero voluptatem.
</div>
<div>Blanditiis consequuntur dicta dolores, eveniet modi nesciunt officiis repellendus sunt, tempore totam vitae
    voluptas? Animi at debitis, dignissimos eum facilis inventore nesciunt nulla obcaecati odio repudiandae temporibus
    tenetur unde voluptatum!
</div>
<div>A accusamus amet aut distinctio earum et facilis incidunt laboriosam molestias necessitatibus, obcaecati odit omnis
    perferendis possimus quae repellat sapiente, sequi sint suscipit voluptate. Excepturi minus modi nam nulla
    perferendis?
</div>
<div>Iure, sint temporibus. Asperiores consectetur delectus, deserunt eum laboriosam molestias quis quod similique
    totam? Aperiam aut ea eaque fugiat iure maxime minima numquam odio placeat, quia sunt ullam veritatis voluptate!
</div>
<div>Dignissimos dolores doloribus incidunt, ipsum minus quae quaerat reiciendis. Autem doloribus eaque eligendi est
    ipsum, nostrum sint voluptas. Aliquid architecto atque cumque in, laboriosam officiis quo ullam voluptate. Beatae,
    corporis?
</div>
</body>
</html>